import React, { useEffect, useState } from 'react'
import { getAdminList, addAdmin } from '../../api/user'
import { Table, Button, Drawer, Input, Select, Tree, message } from 'antd'

import menus from '../../routers/index'

export default function Index() {

    const [adminList, setAdminList] = useState([])

    const [current, setCurrent] = useState(1)



    useEffect(() => {
        getAdminList().then(res => {
            setAdminList(res.data)
        })
    }, [])


    // ----------------- 添加管理员
    // 是否打开抽屉
    const [open, setOpen] = useState(false);

    // 用来收集用户输入和选择的内容
    const [adminname, setAdminName] = useState('')
    const [password, setPassword] = useState('')
    const [role, setRole] = useState(1)
    const [checkedKeys, setCheckedKeys] = useState([])

    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    // 添加数据的点击事件
    const addFn = () => {
        // 先收集所有数据
        // 如果需要表单验证或者加密，可以在这里进行

        // console.log(adminname, password, role, checkedKeys);

        // 收集完数据之后发生数据请求实现添加的功能
        addAdmin({
            adminname, password, role, checkedKeys
        }).then(res => {
            if (res.code === '200') {
                message.success(res.message)
                getAdminList().then(res => {
                    setAdminList(res.data)
                })

                // 关闭抽屉
                onClose()
            }
        })

    }

    return (
        <div>
            <h2>管理员列表 &#x3000;  <Button type="primary" onClick={showDrawer} >添加</Button></h2>

            <Table
                dataSource={adminList}
                rowKey={'adminid'}
                pagination={{
                    current,
                    onChange(page) {
                        setCurrent(page)
                    }
                }}
            >
                <Table.Column title='序号' render={(t, r, i) => {
                    return <span>{(current - 1) * 10 + i + 1}</span>
                }} />
                <Table.Column title='管理员名称' dataIndex={'adminname'} />
                <Table.Column title='管理员权限' dataIndex={'role'} />
                <Table.Column title='操作' render={() => {
                    return <>
                        <Button type="primary">编辑</Button>
                        <Button style={{ backgroundColor: '#f66', color: '#fff' }}>删除</Button>
                    </>
                }} />
            </Table>

            {/* -------------- 添加管理员 ------------- */}
            <Drawer title="添加管理员" placement="right" onClose={onClose} open={open}>
                <Input placeholder="请输入管理员账号" value={adminname} onChange={e => { setAdminName(e.target.value) }} />
                <Input style={{ margin: '20px 0' }} value={password} onChange={e => { setPassword(e.target.value) }} placeholder="请输入管理员密码" />
                <Select value={role} onChange={e => { setRole(e) }} placeholder='请选择管理员类型' style={{ width: '100%' }} >
                    <Select.Option value={1}>管理员</Select.Option>
                    <Select.Option value={2}>超级管理员</Select.Option>
                </Select>

                <Tree
                    checkable
                    treeData={menus}
                    defaultExpandAll
                    fieldNames={{ title: 'label', key: 'key', children: 'children' }}
                    onCheck={(checkedKeys) => {
                        // 获取选中的内容
                        setCheckedKeys(checkedKeys)
                    }}
                />
                <Button type="primary" onClick={addFn}>添加</Button>
            </Drawer>


        </div>
    )
}
